<template>

  <div>
    <div style="display: flex;font-size: 14px;color: #606266; border-bottom: 1px solid #B9AD99;padding-bottom: 5px;">
      <div style="width: 160px;margin-left: 5px;">名称</div>
      <div style="width: 60px;">类型</div>
      <div style="width: 50px;">图标</div>
      <div style="width: 100px;">上级菜单</div>
      <div style="width: 150px;">菜单URL</div>
      <div style="width: 150px;">权限标识</div>
      <div style="width: 150px;">操作</div>
    </div>
    <el-tree style="margin-top: 10px;" ref="tree" :data="data" node-key="id" default-expand-all
             :expand-on-click-node="false" :default-checked-keys="tree.checkeds">
      <div class="custom-tree-node" slot-scope="{ node, data }">
        <template v-if="data.type =='0'">
          <div style="width: 120px;">{{data.name}}</div>
          <div style="width: 60px;">
            <el-tag size="small">目录</el-tag>
          </div>
        </template>
        <template v-else-if="data.type =='1'">
          <div style="width: 102px;">{{data.name}}</div>
          <div style="width: 60px;">
            <el-tag type="success" size="small">菜单</el-tag>
          </div>
        </template>
        <template v-else>
          <div style="width: 84px;">{{data.name}}</div>
          <div style="width: 60px;">
            <el-tag type="danger" size="small">按钮</el-tag>
          </div>
        </template>
        <div style="width: 50px;"><i :class="['iconfont',data.icon]"></i></div>
        <div style="width: 100px;">{{data.parentname}}</div>
        <div style="width: 150px;">{{data.url}}</div>
        <div style="width: 150px;">{{data.perms}}</div>
        <div>
          <el-button type="warning" size="mini" @click="() => edit(node, data)">
            <i class="iconfont icon-edit"></i>编辑
          </el-button>
          <el-button type="danger" size="mini" @click="() => remove(node, data)">
            <i class="iconfont icon-delete"></i> 删除
          </el-button>
        </div>
      </div>
    </el-tree>
    <el-dialog width="500px" :close-on-click-modal="false" center :title="editForm.title"
               :visible.sync="formVisiable">
      <div>
        <MenuCard :menu="editForm"></MenuCard>
      </div>
    </el-dialog>
  </div>

</template>

<script>

  import MenuCard from "./MenuDetail/MenuCard.vue"
  import axios from 'axios'

  export default {
    components: {
      MenuCard
    },
    mounted() {
      this.findAllMenus()
    },
    methods: {
      findAllMenus() {
        var that = this;
        axios.get("/sys/menu/all").then((res) => {
          that.data = res.data;
        })
      },
      remove(node, data) {
        console.log(data)
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
        //发起后他请求删除
      },
      //编辑菜单
      edit(node, data) {
        this.tilte = "编辑菜单"
        this.editForm = data;
        this.formVisiable = true;
      }
    },

    data() {
      return {
        tree: {
          qx: "false",
          qxdisable: true,
          checkeds: []
        },
        data: [],
        title: "编辑菜单",
        formVisiable: false,
        editForm: {}
      }
    }
  }
</script>

<style>
</style>
